// 引入piui 变量声明，可以在uni.scss中进行覆盖
@import './variable.scss';
@import './mixin.scss';

/**
 * 颜色
 * -------------------------------------------------------------------------------------------------
 */
// 黑色
.pi-black {
  color: #000000;
}
// 白色
.pi-white {
  color: #ffffff;
}
// 灰色
.pi-gray {
  color: #666666;
}
// 灰色禁用
.pi-gray-disable {
  color: #cccccc;
}
// 浅灰色
.pi-light-gray {
  color: #999999;
}
// 主要颜色
.pi-primary {
  color: $pi-primary-color;
}
// 次级颜色
.pi-secondary {
  color: $pi-secondary-color;
}
// 第三级颜色
.pi-tertiary {
  color: $pi-tertiary-color;
}
// 第四级颜色
.pi-fourth {
  color: $pi-fourth-color;
}
// 第五级颜色
.pi-fifth {
  color: $pi-fifth-color;
}

/**
 * 背景颜色
 * -------------------------------------------------------------------------------------------------
 */

// 透明背景
.pi-bg-opacity {
  background: transparent;
}
// 背景黑色
.pi-bg-black {
  color: #ffffff;
  background: #000000;
}
// 背景白色
.pi-bg-white {
  color: $pi-font-color;
  background: #ffffff;
}
// 主要颜色
.pi-bg-primary {
  background: $pi-primary-color;
}
// 次级颜色
.pi-bg-secondary {
  background: $pi-secondary-color;
}
// 第三级颜色
.pi-bg-tertiary {
  background: $pi-tertiary-color;
}
// 第四级颜色
.pi-bg-fourth {
  background: $pi-fourth-color;
}
// 第五级颜色
.pi-bg-fifth {
  background: $pi-fifth-color;
}

/**
 * 边框 border
 * -------------------------------------------------------------------------------------------------
 */

[class*='pi-solid'],
[class*='pi-dashed'] {
  @include pi-border;
}

// 生成1-10的边框（实线/虚线）
@for $i from 1 through 10 {
  // 实线
  .pi-solid-#{$i}::after {
    border: 1px * $i solid $pi-line-color;
  }
  .pi-solid-top-#{$i}::after {
    border-top: 1px * $i solid $pi-line-color;
  }
  .pi-solid-right-#{$i}::after {
    border-right: 1px * $i solid $pi-line-color;
  }
  .pi-solid-bottom-#{$i}::after {
    border-bottom: 1px * $i solid $pi-line-color;
  }
  .pi-solid-left-#{$i}::after {
    border-left: 1px * $i solid $pi-line-color;
  }
  // 虚线
  .pi-dashed-#{$i}::after {
    border: 1px * $i dashed $pi-line-color;
  }
  .pi-dashed-top-#{$i}::after {
    border-top: 1px * $i dashed $pi-line-color;
  }
  .pi-dashed-right-#{$i}::after {
    border-right: 1px * $i dashed $pi-line-color;
  }
  .pi-dashed-bottom-#{$i}::after {
    border-bottom: 1px * $i dashed $pi-line-color;
  }
  .pi-dashed-left-#{$i}::after {
    border-left: 1px * $i dashed $pi-line-color;
  }
}

[class*='pi-solid-'],
[class*='pi-dashed-'] {
  &.pi-round::after {
    @extend .pi-round;
  }
}

/**
 * 字体 font
 * -------------------------------------------------------------------------------------------------
 */

// 只取偶数2，4，6，8 ~ 100
@for $i from 2 through 100 {
  @if $i % 2 == 0 {
    // 字号
    .pi-fz-#{$i} {
      font-size: #{$i}rpx;
    }
    // 行高
    .pi-lh-#{$i} {
      line-height: #{$i}rpx;
    }
  }
}

// 字重，单独生成 500 ~ 900 的font-weight，比如pi-fw-500 pi-fw-900
@for $i from 5 through 9 {
  .pi-fw-#{$i * 100} {
    font-weight: $i * 100;
  }
}

.pi-fw-bold {
  font-weight: bold;
}

.pi-text-nowrap {
  white-space: nowrap;
}

// 基础行高
.pi-lh-1,
.pi-lh-base {
  line-height: 1;
}

// 文本超出显示省略符
.pi-text-ellipsis {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;

  @extend .pi-text-nowrap;
}

// 文字对齐方向
.pi-text-center {
  text-align: center;
}
.pi-text-left {
  text-align: left;
}
.pi-text-right {
  text-align: right;
}

.pi-text-through {
  text-decoration: line-through;
}

/**
 * 定位 position
 * -------------------------------------------------------------------------------------------------
 */

// 常用布局定义
.pi-rela {
  position: relative;
}
.pi-abso {
  position: absolute;
}
.pi-fixed {
  position: fixed;
}

// 绝对定位满屏
.pi-abso-full {
  @extend .pi-abso;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
// 绝对定位左上角
.pi-abso-tl {
  @extend .pi-abso;

  top: 0;
  left: 0;
}
// 绝对定位右上角
.pi-abso-tr {
  @extend .pi-abso;

  top: 0;
  right: 0;
}
// 绝对定位左下角
.pi-abso-bl {
  @extend .pi-abso;

  bottom: 0;
  left: 0;
}
// 绝对定位右下角
.pi-abso-br {
  @extend .pi-abso;

  right: 0;
  bottom: 0;
}
// 绝对定位顶部居中
.pi-abso-top-center {
  @extend .pi-abso;

  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
// 绝对定位底部居中
.pi-abso-bottom-center {
  @extend .pi-abso;

  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
// 绝对定位左侧居中
.pi-abso-left-center {
  @extend .pi-abso;

  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
// 绝对定位右侧居中
.pi-abso-right-center {
  @extend .pi-abso;

  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
// 绝对定位自身居中
.pi-abso-center {
  @extend .pi-abso;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// fixed 定居满屏
.pi-fixed-full {
  @extend .pi-fixed;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
// fixed 左上角
.pi-fixed-top {
  @extend .pi-fixed;

  top: 0;
  left: 0;
}
// fixed 左下角 ，已适配iphonex，如果需要底部内边距，配合.pd-bottom一起使用
.pi-fixed-bottom {
  @extend .pi-fixed;

  bottom: 0;
  left: 0;

  // 定义底部padding是因为考虑到iphonex的兼容性，避免生成大量样式，只取（2 ~ 50 之间的偶数）
  /* stylelint-disable */
  @for $i from 2 through 50 {
    @if $i % 2 == 0 {
      &.pd-bottom-#{$i} {
        padding-bottom: #{$i}rpx;
        padding-bottom: calc(constant(safe-area-inset-bottom) + #{$i}rpx);
        padding-bottom: calc(env(safe-area-inset-bottom) + #{$i}rpx);
      }
    }
  }
}
// 绝对定位自身居中
.pi-fixed-center {
  @extend .pi-fixed;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/**
 * 布局
 * -------------------------------------------------------------------------------------------------
 */

// 正方形（需要两个容器实现）
.pi-square {
  @extend .pi-rela;

  width: 100%;
  height: 0;
  padding-bottom: 100%;

  & > view {
    // 绝对定位占满
    @extend .pi-abso-full;
  }
}

.pi-inline {
  display: inline;
}

.pi-inline-block {
  display: inline-block;
}

.pi-opacity-show {
  opacity: 1;
}

.pi-opacity-hide {
  pointer-events: none; // 鼠标可穿透
  opacity: 0;
}

.pi-visible {
  visibility: visible;
}

.pi-hidden {
  visibility: hidden;
}

.pi-of-hidden {
  overflow: hidden;
}

.pi-of-x-hidden {
  overflow-x: hidden;
}

.pi-of-y-hidden {
  overflow-y: hidden;
}

/**
 * flex 布局
 * -------------------------------------------------------------------------------------------------
 */
.pi-inline-flex {
  display: inline-flex;
}
.pi-flex {
  display: flex;
}
.pi-flex-sub {
  flex: 1;
}
// flex不可换行
.pi-flex-nowrap {
  @extend .pi-flex;

  flex-wrap: nowrap;
}
// flex可换行
.pi-flex-wrap {
  @extend .pi-flex;

  flex-wrap: wrap;
}
.pi-flex-row {
  @extend .pi-flex;

  flex-direction: row;
}
.pi-flex-column {
  @extend .pi-flex;

  flex-direction: column;
}
.pi-align-start {
  @extend .pi-flex;

  align-items: flex-start;
}
.pi-align-end {
  @extend .pi-flex;

  align-items: flex-end;
}
.pi-align-center {
  @extend .pi-flex;

  align-items: center;
}
.pi-align-stretch {
  @extend .pi-flex;

  align-items: stretch;
}
.pi-align-baseline {
  @extend .pi-flex;

  align-items: baseline;
}
.pi-self-start {
  @extend .pi-flex;

  align-self: flex-start;
}
.pi-self-center {
  @extend .pi-flex;

  align-self: center;
}
.pi-self-end {
  @extend .pi-flex;

  align-self: flex-end;
}
.pi-self-stretch {
  @extend .pi-flex;

  align-self: stretch;
}
.pi-justify-start {
  @extend .pi-flex;

  justify-content: flex-start;
}
.pi-justify-end {
  @extend .pi-flex;

  justify-content: flex-end;
}
.pi-justify-center {
  @extend .pi-flex;

  justify-content: center;
}
.pi-justify-between {
  @extend .pi-flex;

  justify-content: space-between;
}
.pi-justify-around {
  @extend .pi-flex;

  justify-content: space-around;
}
// 横向flex中心居中
.pi-flex-row-center {
  @extend .pi-flex-row;
  @extend .pi-justify-center;
  @extend .pi-align-center;
}

// 纵向flex中心居中
.pi-flex-column-center {
  @extend .pi-flex-column;
  @extend .pi-justify-center;
  @extend .pi-align-center;
}

/**
 * 初始化全局样式
 * -------------------------------------------------------------------------------------------------
 */
body,
page {
  font-family: $pi-font-family;
  font-size: $pi-font-size;
  color: $pi-font-color;
  background-color: $pi-background-color;
}

view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
  box-sizing: border-box;
  font-size: inherit;
  &:focus {
    outline: none;
  }
}

// 修复input type=textarea时候，宽度没有占满的问题
pi-input {
  width: 100%;
}

// 不显示滚动条
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
  background: transparent;
  -webkit-appearance: none;
}

// 解决image加载闪烁的问题
image {
  width: 100%;
  height: 0;
  height: auto;
  will-change: transform;
}

// 修复toast层级过低的问题
uni-toast {
  z-index: 9999 !important;
}

// 点击态
.pi-hover-class {
  position: relative;
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    // 增加鼠标穿透，否则会影响作用该样式的点击事件
    pointer-events: none;
    content: '';
    background: rgba(0, 0, 0, 0.05);
  }
}

.pi-full-height {
  @include full-height($include-tabbar: false);
}


// 用于没有scroll-view时候的容器，默认铺满整个视窗，y轴内容溢出滚动
.pi-container {
  position: relative;

  @include full-height($include-tabbar: false);

  overflow-x: hidden;
  overflow-y: auto;
}

// 用于scroll-view时候的容器
.pi-scroll-container {
  position: relative;
  display: flex;
  flex-direction: column;

  @include full-height($include-tabbar: false);

  overflow: hidden;
}


// 滚动视区
.pi-scroll {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
}


.uni-scroll-view {
  -webkit-overflow-scrolling: touch;
}

// 内容区域
.pi-content {
  padding: $pi-content-padding;

  @extend .pi-bg-white;
}

// 圆形
.pi-avatar,
.pi-circle,
.pi-radius-round {
  border-radius: 50%;
}

// 椭圆效果
.pi-round {
  overflow: hidden;
  border-radius: 500000rpx;
}

// 去除webkit的默认样式
.fix-webkit-appearance {
  -webkit-appearance: none;
}

// 安全区域，兼容iphonex
.pi-safearea {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background: $pi-safearea-bg;
}

// 底部按钮
.pi-bottom-btns {
  @extend .pi-w-100P;
  @extend .pi-align-center;

  background-color: #ffffff;
  &.box-shadow {
    box-shadow: 0 -4rpx 10rpx 0 rgba(0, 0, 0, 0.06);
  }
}

// input
.placeholder {
  color: $uni-text-color-grey;
}
.uni-input-placeholder {
  color: $pi-placeholder-color;
}

// 右箭头（更多）
.pi-more,
.more {
  position: relative;
  &::before {
    position: absolute;
    top: 50%;
    right: 32rpx;
    font-family: 'piui';
    font-size: 32rpx;
    color: #d2d2d2;
    content: '\E6A3';
    transform: translateY(-50%);
  }
}

.pi-upload {
  position: relative;
  display: inline-block;
  width: $pi-upload-radius;
  height: $pi-upload-radius;
  overflow: hidden;
  background-color: #f6f6f6;
  border-radius: 8rpx;
  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: 'pi-icon';
    font-size: 60rpx;
    color: #a4a4a4;
    text-align: center;
    content: '\e64d';
    transform: translate(-50%, -50%);
  }
}

/**
 * 预设常用样式 只取双数 ，这里循环次数太多，只使用缩写模式
 * -------------------------------------------------------------------------------------------------
 */
@for $i from 1 through 100 {
  @if $i % 2 == 0 {
    /* padding */
    .pi-pd-#{$i} {
      padding: #{$i}rpx;
    }
    .pi-pd-top-#{$i} {
      padding-top: #{$i}rpx;
    }
    .pi-pd-right-#{$i} {
      padding-right: #{$i}rpx;
    }
    .pi-pd-bottom-#{$i} {
      padding-bottom: #{$i}rpx;
    }
    .pi-pd-left-#{$i} {
      padding-left: #{$i}rpx;
    }
    .pi-pd-tb-#{$i} {
      padding-top: #{$i}rpx;
      padding-bottom: #{$i}rpx;
    }
    .pi-pd-lr-#{$i} {
      padding-right: #{$i}rpx;
      padding-left: #{$i}rpx;
    }

    /* margin */
    .pi-mg-#{$i} {
      margin: #{$i}rpx;
    }
    .pi-mg-top-#{$i} {
      margin-top: #{$i}rpx;
    }
    .pi-mg-right-#{$i} {
      margin-right: #{$i}rpx;
    }
    .pi-mg-bottom-#{$i} {
      margin-bottom: #{$i}rpx;
    }
    .pi-mg-left-#{$i} {
      margin-left: #{$i}rpx;
    }
    .pi-mg-tb-#{$i} {
      margin-top: #{$i}rpx;
      margin-bottom: #{$i}rpx;
    }
    .pi-mg-lr-#{$i} {
      margin-right: #{$i}rpx;
      margin-left: #{$i}rpx;
    }

    // width & height
    .pi-w-#{$i} {
      width: #{$i}rpx;
    }
    .pi-h-#{$i} {
      height: #{$i}rpx;
    }

    // radius
    .pi-radius-#{$i} {
      border-radius: #{$i}rpx;
    }

    // line-height
    .pi-lh-#{$i} {
      line-height: #{$i}rpx;
    }
  }
}

/**
 * 常用宽高定义
 * -------------------------------------------------------------------------------------------------
 */
.pi-w-100vw,
.pi-w-100VW {
  width: 100vw;
}
.pi-w-100p,
.pi-w-100P {
  width: 100%;
}
.pi-h-100vh,
.pi-h-100VH {
  @include full-height($include-tabbar: true);
}
.pi-h-100p,
.pi-h-100P {
  height: 100%;
}

.pi-disabled {
  opacity: $pi-disabled-opacity;
  cursor: not-allowed;
}